<!--
 * @Author: 王坤
 * @LastEditors: Please set LastEditors
 * @Description: LcTimePicker 时间选择
-->
<template>
  <div class="lc-time-picker">
    <el-time-picker
      ref="timePickerRef"
      v-model="timePickerValue"
      popper-class="lc-time-picker-popper"
      v-bind="configs"
      :teleported="false"
      :clear-icon="CircleCloseFilled"
      @focus="initTimeButton"
    >
    </el-time-picker>
  </div>
</template>

<script setup>
import { nextTick, onMounted, getCurrentInstance } from 'vue';
import { CircleCloseFilled } from '@element-plus/icons-vue';
defineProps({
  configs: {
    type: Object,
    default: () => {}
  }
});
const { proxy } = getCurrentInstance();
const timePickerValue = defineModel();
// let { proxy } = getCurrentInstance();
onMounted(() => {
  adjustIconPosition();
  addEventListener();
});
const addEventListener = () => {
  const el = proxy.$el;
  el.addEventListener('mouseenter', (event) => {
    handleEnter(event);
  });
  el.addEventListener('mouseleave', (event) => {
    handleLeave(event);
  });
};
const deletePrefixIcon = (currentDom) => {
  for (let i = 0; i < currentDom.children?.length; i++) {
    const child = currentDom.children[i];
    if (child.getAttribute('class') === 'el-input__prefix') {
      currentDom.removeChild(child);
      return {
        parentDom: currentDom,
        iconDom: child
      };
    } else {
      const res = deletePrefixIcon(child) || {
        parentDom: null,
        iconDom: null
      };
      if (res) return res;
    }
  }
};
// 初始化footer按钮
function initTimeButton() {
  nextTick(() => {
    let footerDom = null;
    const popperDoms = proxy.$el.getElementsByClassName('lc-time-picker-popper')[0];
    popperDoms.addEventListener('mouseenter', () => {
      const iconDom = proxy.$el.getElementsByClassName('el-input__suffix is-time')[0];
      iconDom?.setAttribute('style', '');
    });
    // if (popperDoms.getAttribute('style')?.indexOf('display:none') === -1) {
    footerDom = popperDoms.getElementsByClassName('el-time-panel__footer')[0];
    // }
    if (!footerDom) return;
    if (footerDom.getElementsByClassName('el-time-panel__btn current').length) return;
    const confirmBtn = footerDom.getElementsByClassName('el-time-panel__btn confirm')[0];
    const currentTimeBtn = document.createElement('button');
    currentTimeBtn.innerHTML = '当前时间';
    currentTimeBtn.setAttribute('class', 'el-time-panel__btn current');
    currentTimeBtn.addEventListener('click', () => {
      timePickerValue.value = new Date();
      nextTick(() => {
        const ulList = window.document.getElementsByClassName('el-time-spinner__wrapper');
        if (ulList?.length) {
          Array.from(ulList).forEach((dom) => {
            dom.dispatchEvent(new MouseEvent('mousemove'));
          });
        }
      });
    });
    footerDom.insertBefore(currentTimeBtn, confirmBtn);
  });
}
// 调整图标位置
function adjustIconPosition() {
  const el = proxy.$el;
  let { parentDom, iconDom } = deletePrefixIcon(el) || {};

  iconDom?.setAttribute('class', 'el-input__suffix is-date');
  iconDom?.childNodes[0]?.setAttribute('class', 'el-input__suffix-inner');
  parentDom?.appendChild(iconDom);
}
function handleEnter(event) {
  let val = timePickerValue.value;
  if (!val) return;
  const parentDom = event.currentTarget;
  const iconDom = parentDom?.getElementsByClassName('el-input__suffix is-date')[0];
  iconDom?.setAttribute('style', 'display:none');
}
function handleLeave(event) {
  const parentDom = event.currentTarget;
  const inputDom = parentDom?.getElementsByClassName('el-input__suffix is-date')[0];
  inputDom?.setAttribute('style', 'border-color: #C0C4CC');
}
</script>
